<template>
    <div id="boxArea" ref="selectMonths" class="selectMonthBoxSquare rel clearFixed">
      <el-popover
        v-model="visible"
        placement="bottom"
        width="250"
        trigger="click"
      >
        <el-input slot="reference" v-model="inputValue" class="inputStyle" type="text" size="small" :placeholder="placeholder" readonly @focus="showBox = true">
          <i slot="prefix" class="el-input__icon el-icon-date"></i>
          <i v-if="showClear" slot="suffix" class="el-input__icon el-icon-circle-close clearIconStyle" @click="resetMonth"></i>
        </el-input>
   
        <div class="selectContentBox">
          <div class="contentArea">
   

            <div class="conterList">
              <el-checkbox-group v-model="optTime[curIndex].queryTime" class="flex flex-wrap" @change="onChange">
                <el-row class="monthRow">
                  <el-col v-for="(item,index) in DateList[curIndex].queryTime" :key="index" :span="6" class="monthCol">
                    <el-checkbox 
                  
                      :class="[{'today': item === currentM && curIndex === (DateList.length - 1) / 2}, 'onSelect flex-x-center']" 
                      :label="`${DateList[curIndex].TimeYear}-${(item<=9)?`0${item}`:item}`">
                      {{ monthMap[item] }}月
                    </el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
          </div>
   
          <div class="buttonBox t-r">
            <el-button class="buttonStyle" size="mini" plain @click.stop="resetMonth">重置</el-button>
            <el-button class="buttonStyle" size="mini" type="primary" plain @click.stop="handleSubmit">确定</el-button>
          </div>
        </div>
      </el-popover>
    </div>
  </template>
  <script>
    export default {
      name: 'SelectMonths',
      props: {
        placeholder: {
          type: String,
          default: '请选择查询月份'
        }
      },
      data() {
        return {
          DateList: [], // 年份月份数组
          optTime: [], // 月份选中结果数组
          OneY: '', // 当前年份
          currentM: '', // 当前月份
          optTimes: [], // 点击月份时的所有选中结果
          resultTimes: [], // 点击“确定”按钮后的选择结果
          showBox: false, // 是否显示月份选择弹框
          visible: false,
          inputValue: '', // 输入框的绑定值
          showClear: false, // 是否显示输入框右边的“清空”小图标
          monthMap: { // 月份显示为中文
            '1': '一',
            '2': '二',
            '3': '三',
            '4': '四',
            '5': '五',
            '6': '六',
            '7': '七',
            '8': '八',
            '9': '九',
            '10': '十',
            '11': '十一',
            '12': '十二'
          }
        }
      },
      created() {
        this.init()
      },
      mounted() {
        // 点击弹框外的任意位置关闭区域弹窗
        document.addEventListener('click', (e) => {
          // 获取弹窗对象
          const boxArea = document.getElementById('boxArea')
          // 判断弹窗对象中是否包含点击对象
          if (boxArea && !boxArea.contains(e.target)) {
            // 判断当前选中月份与上次点击“确定”按钮时的选择结果是否一致
            const equalArr = this.resultTimes.sort().toString() === this.optTimes.sort().toString()
            if (!equalArr) {
              // 如果不一致（因为是多选，所以必须是点击了“确定”按钮后才能进行查询）：
              // 将选择结果恢复到上次点击“确定”按钮时的结果
              this.optTimes = this.resultTimes
              // 将输入框的值恢复到上次点击“确定”按钮时的值
              this.inputValue = this.optTimes.join(',')
              // 根据输入框是否有值来判断清空图标是否渲染
              this.showClear = !!this.inputValue !== ''
              // 将月份选中结果恢复到上次点击“确定”按钮时的选中月份
              const _opt = this.resultTimes.map(v => { return v.substring(0, 4) })
              for (const item in this.optTime) {
                this.optTime[item].queryTime = []
                _opt.map((items, indexs) => {
                  if (items === this.optTime[item].TimeYear) {
                    this.optTime[item].queryTime.push(this.resultTimes[indexs])
                  }
                })
              }
            }
            this.resetMonth()
            // 关闭弹框
            this.showBox = false
          }
        })
      },
      methods: {
        // 初始化数据，获取前20年，然后循环 每一年里面都有12个月的 得到数组 opTime 和 DateList
        init() {
          const _this = this
          const _opt = []
          const _optTime = []
          const arr = new Array(12)
          const optDate = this.getDateList()
          optDate.map((item, index) => {
            // 月份选择时el-checkbox-group绑定的值
            _optTime[index] = {
              TimeYear: item.value,
              queryTime: []
            }
            // 给每一年份设置12个月份，el-checkbox初始化显示时使用
            _opt[index] = {
              TimeYear: item.value,
              queryTime: []
            }
            for (let i = 1; i <= arr.length; i++) {
              _opt[index].queryTime.push(i)
            }
          })
          _this.optTime = _optTime
          _this.DateList = _opt
          _this.curIndex = (_this.DateList.length - 1) / 2
          // console.log('_this.curIndex', _this.curIndex)
        },
        // 获取近20年年份列表，倒序排列，最新一年在最前面
        getDateList() {
          const Dates = new Date()
          const year = Dates.getFullYear()
          this.OneY = year
          this.currentM = Dates.getMonth() + 1
          const startyear = Dates.getFullYear() - 20
          const endyear = Dates.getFullYear() + 20
          const Years = []
          for (let i = startyear; i <= endyear; i++) {
            const currentYear = { key: i, value: i }
            Years.push(currentYear)
          }
          return Years.reverse()
        },
        // 确定
        handleSubmit() {
          const _this = this
          // 更新输入框的值
          _this.inputValue = _this.optTimes.join(',')
          // 根据输入框是否有值来判断清空图标是否渲染
          _this.showClear = !!_this.inputValue !== ''
          // 将点击“确定”按钮的选择结果保存起来（该值将在哪里使用：在点击弹框以外区域关闭弹框时使用，mounted中）
          _this.resultTimes = _this.optTimes
          // 关闭弹框
          _this.showBox = false
          _this.visible = false
          _this.$emit('submitBtn', _this.resultTimes)
        },
        // 重置
        resetMonth() {
          const _this = this
          // 将年份重置到当前年份
          const Dates = new Date()
          const year = Dates.getFullYear()
          _this.OneY = year
          _this.curIndex = (_this.DateList.length - 1) / 2
          // 将已选择的月份清空
          _this.optTimes = []
          for (const i in _this.optTime) {
            _this.optTime[i].queryTime = []
          }
          // 将输入框清空
          _this.inputValue = ''
          // 根据输入框是否有值来判断清空图标是否渲染，此处必然不渲染
          this.showClear = false
          // 将点击“确定”按钮的选择结果清空
          _this.resultTimes = []
          // 关闭月份选择弹框
          _this.showBox = false
          _this.visible = false
          _this.$emit('resetBtn', _this.resultTimes)
        },
    
        // 选择月份
        onChange() {
            const _this = this;
const _opt = _this.optTime;
const arr = [];

for (const item in _opt) {
    if (_opt[item].queryTime.length > 0) {
        _opt[item].queryTime.forEach(v => {
            // 提取月份部分并存入 arr 数组
            const month = v.split('-')[1]; // 假设 v 的格式为 "YYYY-MM"
            arr.push(month);
        });
    }
}

// 将处理后的月份数组赋给 _this.optTimes
_this.optTimes = arr;

// 更新输入框的值，只保留月份部分
_this.inputValue = _this.optTimes.join(',');

console.log(_this.optTimes);

// 根据输入框是否有值来判断清空图标是否渲染
_this.showClear = _this.inputValue !== '';

        }
      }
    }
  </script>
  <style lang="scss" scoped>
    .flex {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
    }
    .flex-wrap {
      flex-wrap: wrap;
    }
    .flex-around {
      justify-content: space-around;
    }
    .flex-x-center {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
    .selectMonthBoxSquare {
      // width: 250px;
      width: 100%;
      .selectContentBox {
        position: absolute;
        top: 35px;
        left: 0;
        z-index: 2021;
        background: #ffffff;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        .contentArea {
          width: 330px;
        }
      }
    }
   
      .inputStyle {
        width: 100%;
      }
      .clearIconStyle {
        display: none;
      }
      .inputStyle:hover .clearIconStyle{
        display: block;
      }
      .conterList{
        .monthCol{
          .today {
            color: #1890ff;
          }
        }
        .onSelect{
          // width: 25% !important;
          padding:3px 0;
          margin: 20px 0 !important;
        }
      }
      ::v-deep .el-checkbox__input {
        display: none !important;
      }
      ::v-deep .el-checkbox__label {
        padding-left: 0px !important;
      }
      ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #fff;
      }
      label.el-checkbox.onSelect.flex-x-center.is-checked {
        background: #409EFF;
        width: 50px;
        border-radius: 15px;
      }
      .lableStyle {
        font-size: 14px;
      }
      .el-button--mini {
        padding: 5px 15px;
        font-size: 12px;
        border-radius: 3px;
      }
      .buttonBox {
        border-top: 1px solid #e5e5e5;
        padding: 10px;
        display: flex;
        justify-content: flex-end;
      }
  </style>